upgrading packages and fixing linting errors#53
Conversation
There was a problem hiding this comment.
Pull request overview
This PR upgrades multiple packages and fixes linting errors across the codebase. The main focus is on modernizing the code to follow TypeScript and React best practices, including the use of type imports, refactoring client-side rendering detection in portal components, and updating the ESLint configuration.
Changes:
- Upgraded multiple dependencies including Next.js (16.0.10 → 16.1.6), React (19.2.1 → 19.2.4), TypeScript ESLint tooling, and others
- Converted all type imports to use the
typekeyword prefix (e.g.,import { type Foo }) - Refactored portal-based components (Modal, ConfirmationModal, ActionResponsePopup) to use
useSyncExternalStoreinstead ofuseState+useEffectfor client-side detection - Replaced functional component wrappers for table headers with direct JSX elements
- Simplified state management in several components (buy.tsx, account.tsx, admin pages)
- Updated ESLint configuration to use flat config format with Next.js core-web-vitals
- Fixed apostrophe HTML entity in German text and formatting inconsistencies
Reviewed changes
Copilot reviewed 40 out of 41 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated dependency versions and changed lint command from next lint to eslint . |
| package-lock.json | Lockfile updates for new package versions |
| eslint.config.mts | Simplified ESLint config using flat format with Next.js core-web-vitals |
| src/server/api/routers/*.ts | Added type keyword to type-only imports |
| src/pages/*.tsx | Added type keyword to imports and refactored state management |
| src/pages/buy.tsx | Refactored category filter state management to use overrides pattern |
| src/pages/index.tsx | Simplified error message handling logic |
| src/pages/account.tsx | Simplified pagination state, replaced computed date with React state |
| src/pages/admin/*.tsx | Simplified pagination logic and converted Legend components to JSX elements |
| src/components/**/*.tsx | Added type imports, refactored portal components, converted Legend to JSX |
| src/components/Layout/Modal.tsx | Replaced useState+useEffect with useSyncExternalStore |
| src/components/General/ConfirmationModal.tsx | Replaced useState+useEffect with useSyncExternalStore |
| src/components/General/ActionResponsePopup.tsx | Replaced useState+useEffect with useSyncExternalStore |
| src/components/Forms/UserForm.tsx | Simplified allow overdraw state management |
| src/components/Forms/ClearingAccountForm.tsx | Moved useEffect after useForm hook |
| src/components/FormElements/GroupOrderSplit.tsx | Added timeout cleanup to useEffect |
| src/components/FormElements/CategorySelector.tsx | Removed ESLint disable comments |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| useEffect(() => { | ||
| reset() | ||
| }, [props.id]) |
There was a problem hiding this comment.
The reset() function is called in a useEffect that depends on props.id, but the reset function from useForm is missing from the dependency array. This could lead to ESLint warnings and potential issues if the reset reference changes. Add reset to the dependency array: }, [props.id, reset]). Alternatively, if reset is stable (which it should be from useForm), add an ESLint disable comment with justification.
| }, [props.id]) | |
| }, [props.id, reset]) |
| const defaultDisplayCategories: { [index: string]: boolean } = {} | ||
| allRelevantCategories?.forEach((category) => { | ||
| defaultDisplayCategories[category.id] = category.defaultUnfoldedDisplay | ||
| }) |
There was a problem hiding this comment.
The defaultDisplayCategories object is computed on every render, which could cause performance issues if allRelevantCategories is large. Since this computation depends on data that changes with the query, consider wrapping it in useMemo to avoid unnecessary recomputation: const defaultDisplayCategories = useMemo(() => { ... }, [allRelevantCategories])
No description provided.